<template lang="html">
  <div>
    <nav>
      <div class="w1200">
        <div class="logo inline fl"></div>
        <div class="slogn inline fl"></div>
        <div class="navs inline">
          <a href="#">首页</a>
          <a href="#course1">合作课</a>
          <a href="#course2">分享课</a>
          <a href="#course3">公开课</a>
        </div>
        <div class="toptel fr">
          <i class="icon icon-tel ver-middle"></i>4008-260-272
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  data(){
    return{
      // props: ['actDetailColor']
    }
  }
}
</script>

<style lang="less" scoped>
nav{
  height: 75px;line-height: 75px;border-bottom: 1px solid #f5a41d;
  .logo{
    width: 181px; height: 37px;margin-top: 18px;
    background: url('../../assets/images/ts-logo.png');
  }
  .slogn{
    width: 132px; height: 23px;margin-left: 12px;margin-top: 25px;
    background: url('../../assets/images/ts-slogn.png');
  }
  .navs{
    margin-left: 80px;color: #666;
    a{
      margin-left: 78px;font-size: 14px;
      &.active,&:hover{color: #ffb040;}
      .icon-ts{
        width: 24px; height: 23px;
        background: url('../../assets/images/css_sprites_index.png') -58px -99px;margin-right: 6px;
      }
    }
    .router-link-exact-active{color: #ffb040;}
  }
  .toptel{
    font-size: 16px;color: #ffb040;font-weight: bold;
    .icon-tel{
      width: 16px; height: 16px;
      background: url('../../assets/images/css_sprites_index.png') -107px -52px;
      margin: 0 6px 0 35px;
    }
  }
}
</style>
